<!-- 店铺分享 -->
<template>
	<div class="share-store">
		<Modal v-model="shareModal" width="626" class-name="share-modal" :closable="false" :footer-hide="true">
			<div class="pos-r store-content">
				<img class="store-share-bg" src="@/assets/images/public/store-share-bg.png" alt="">
				<div class="store-close flex a-c j-c pos-a">
					<Icon type="md-close" class="col-fff f-32 c-p" @click="close"/>
				</div>
			</div>
			<div class="c-p share-btn br-4 flex a-c j-c col-fff f-20 lin-20 bold bg-ff1" @click="copyLink">
				COPY SHARE LINK
			</div>
		</Modal>
	</div>
</template>

<script>
	import { mapState } from "vuex";
	
	export default{
		data(){
			return{
				shareModal:false,
			}
		},
		computed: {
		  ...mapState({
				config: state => state.config.config,
		    userInfo: state => state.user.userInfo
		  })
		},
		methods:{
			open(){
				this.shareModal = true;
			},
			close(){
				this.shareModal = false;
			},
			copyLink(){
				if (this.$analytics) {
				  this.$analytics.logEvent('dy_3010');
				}
				let str = `${this.config.webDomain}/register?inviteCode=${this.userInfo.inviteCode} ，${this.$t('store.findShopTxt')}`;
				let _this = this;
				this.$copyText(str).then(function () {
				  _this.$Message.success(_this.$t('goods.group_play_text47'));
				}, function () {
				  _this.$Message.error(_this.$t('public.copyFail'));
				})
				this.close();
			}
		}
	}
</script>
<style lang="less">
	.share-modal{
		display: flex;
		align-items: center;
		justify-content: center;
		.ivu-modal{
			top: 0;
		}
	}
</style>
<style scoped lang="less">
	.share-modal{
		.store-content{
			width: 600px;
			height: 439px;
			margin: auto;
		}
		.store-close{
			top:10px;
			right:10px;
		}
		.store-share-bg{
			width: 600px;
			height: 439px;
			display: block;
			margin: auto;
		}
		.share-btn{
			width: 305px;
			height: 68px;
			margin: auto;
			margin-top: 24px;
		}
	}
	:deep(.share-modal) .ivu-modal-content{
		background: transparent;
		box-shadow:none;
	}
</style>